<template>
	<view class="content">
		<uni-icons type="left" size="30" @click="back()"></uni-icons>
		<view class="title">
			<text class="name">邀约</text>
			<text class="sign">愿我遇良人~愿你常开心</text>
			<image class="title" src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png"></image>
		</view>
		<view class="jourList">
			<text class="head">树洞</text>
			<view v-for="data in jourList" :key="data.id">
				<treeHoldCar :item="data"></treeHoldCar>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {0
			return {
				jourList:[
					{
						"titleUrl":"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png",
						"id":"1",
						"title":"小猫",
						"time":"157天前"
					},
					{
						"titleUrl":"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png",
						"id":"2",
						"title":"咕噜噜小狗",
						"time":"244天前"
					},
					{
						"titleUrl":"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png",
						"id":"3",
						"title":"干啥",
						"time":"1年前"
					}
				]
			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
.content{
	padding-top: 20rpx;
	.title{
		width: 100vh;
		height: 25vh;
		
		
		.name{
			font-size: 4vh;
			position: absolute;
			top: 10%;
			left: 10%;
		}
		.sign{
			font-size: 2vh;
			position: absolute;
			top: 15%;
			left: 10%;
		}
		.title{
			width: 12vh;
			height: 12vh;
			position: absolute;
			top: 8%;
			left: 65%;
			border-radius: 12vh;
		}
	}
	.jourList{
		width: 100%;
		height: 75vh;
		background-color: $bg-gary;
		padding-top: 30rpx;
		.head{
			font-size: 3vh;
			padding-left: 50rpx;
			
		}
	}
}
</style>
